<template>
  <div><el-row>
      <el-col :span="18" class="marginTop paddingLfet colorwhite fontSize">
        年龄数据
      </el-col>
      <el-col :span="6" class="jend marginTop paddingRight colorwhite fontSize">
        详情>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="main1" :style="chartStyle"></div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  data() {
    return { height: 31 };
  },
  computed: {
    chartStyle() {
      return `width: 100%; height: ${this.height}vh`;
    },
  },
  mounted() {
    let WW = window.innerWidth;
    if (WW < 1300) {
      this.height = 32;
    }
    setTimeout(() => {
      this.echarts111();
    }, 100);
  },
  methods: {
    echarts111() {
      var myChart = echarts.init(document.getElementById("main1"));
      var option;
      // 指定图表的配置项和数据
      option = {
        tooltip: {
          // 提示框的触发方式
          trigger: "item",
          // 提示框内容格式
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          // 工具箱
          feature: {
            // 数据视图
            dataView: { readOnly: false },
            // 保存
            restore: {},
            // 保存图片
            saveAsImage: {},
          },
        },
        // 图例
        legend: {
          // 图例的数据
          top: 30,
          textStyle: {
            fontSize: 15,
            color: "wah",
          },
          data: ["展现", "点击", "访问", "咨询", "订单"],
        },

        // 图表数据
        series: [
          {
            // 图表类型
            name: "漏斗图",
            type: "funnel",
            // 左边距
            left: "10%",
            // 上边距
            top: 80,
            // 右边距
            //x2: 80,
            // 下边距
            bottom: 20,
            // 宽度
            width: "80%",
            // 高度
            // height: {totalHeight} - y - y2,
            // 最小值
            min: 0,
            // 最大值
            max: 100,
            // 最小宽度
            minSize: "0%",
            // 最大宽度
            maxSize: "100%",
            // 排序
            sort: "descending",
            // 间隔
            gap: 2,
            // 标签
            label: {
              // 是否显示
              show: true,
              // 位置
              position: "inside",
            },
            // 标签线
            labelLine: {
              // 长度
              length: 10,
              // 线宽
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            // 边框
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            //  emphasis
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            // 数据
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 20, name: "订单" },
              { value: 80, name: "点击" },
              { value: 100, name: "展现" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
  .fontSize {
  font-size: 18px;
}
.colorwhite {
  color: white;
}
.paddingLfet {
  padding-left: 2vh;
}
.paddingRight {
  padding-right: 2vh;
}
.marginTop {
  margin-top: 2vh;
}
.jend {
  display: flex;
  justify-content: flex-end;
}
</style>